
import React, { Component } from "react"
import { axios } from "&/axios"
import {
    Button,
    Input,
    Form,
    Modal,
    message
} from "antd"
import { UserOutlined } from '@ant-design/icons';

export default class Mine extends Component {
    state = {
        visible: false,
        userinfo: null,
        type: null
    }
    componentDidMount = () => {
        var userinfo = JSON.parse(sessionStorage.users);
        var type = null;
        if (userinfo.rolltype == 1) {
            type = "普通用戶"
        } else if (userinfo.rolltype == 2) {
            type = "管理员"
        } else {
            type = "超级管理员"
        }
        if (userinfo) {
            this.setState({
                userinfo,
                type: type
            })
        }
    }
    handleSubmit = () => {
        this.setState({
            visible: true
        })
    }
    
    handleOk=(value)=>{
        this.refs.gaimiForm.validateFields().then(values=>{
            if(values.lastpass==JSON.parse(sessionStorage.users).password){
                if(values.newpass==values.newpass2){
                    if(values.newpass!=values.lastpass){
                        axios.post("/api/findonemodify",{newpass2:values.newpass2}).then(res=>{
                            if(res.data.type){
                                var userinfo=JSON.parse(sessionStorage.users)
                                userinfo.password=res.data.result[0].password
                                sessionStorage.users=JSON.stringify(userinfo)
                                var users=JSON.parse(localStorage.users)
                                users.password=res.data.result[0].password
                                localStorage.users=JSON.stringify(users)
                            }
                            this.setState({
                                visible:false
                                
                            })
                            this.props.history.push("/login")
                            
                        })
                    }else{
                        message.error("新密码不能和旧密码一致")
                    }
                }else{
                    message.error("两次密码不一致")
                }
            }else{
                message.error("旧密码和登录密码不一致")
            }
        })
    }
    render() {
        const {
            userinfo,
            type
        } = this.state;
        return (
            userinfo && <div>
                <h2>个人中心</h2>
                <Input placeholder={userinfo.mobile} disabled style={{ width: 240, margin: "20px 30%" }} prefix={<UserOutlined className="site-form-item-icon" />} />
                <Input placeholder={userinfo.username} disabled style={{ width: 240, margin: "20px 30%" }} prefix={<UserOutlined className="site-form-item-icon" />} />
                <Input placeholder={type} disabled style={{ width: 240, margin: "20px 30%" }} prefix={<UserOutlined className="site-form-item-icon" />} />
                <Button type="primary" style={{ width: 240, margin: "20px 30%" }} onClick={() => this.handleSubmit()}>修改密码</Button>
                <Modal
                    title="添加记录"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={() => this.setState({ visible: false })}
                    okText="确认"
                    cancelText="取消"
                >
                    <Form
                        className="form-box"
                        name="basic"
                        ref="gaimiForm"

                    >
                        <Form.Item
                            label="旧密码"
                            name="lastpass"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入你的原密码!',
                                },
                                {
                                    max: 12,
                                    min: 2,
                                    message: "请输入原密码"
                                }
                            ]}
                        >
                            <Input
                                prefix={<UserOutlined className="site-form-item-icon" />}
                                placeholder="请输入原密码" type="password"
                            />
                        </Form.Item>
                        <Form.Item
                            label="新密码"
                            name="newpass"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入你的新密码!',
                                },
                                {
                                    max: 12,
                                    min: 2,
                                    message: "请输入新密码"
                                }
                            ]}
                        >
                            <Input
                                prefix={<UserOutlined className="site-form-item-icon" />}
                                placeholder="请输入新密码" type="password"
                            />
                        </Form.Item>
                        <Form.Item
                            label="确认密码"
                            name="newpass2"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入你的新密码!',
                                },
                                {
                                    max: 12,
                                    min: 2,
                                    message: "请输入新密码"
                                }
                            ]}
                        >
                            <Input
                                prefix={<UserOutlined className="site-form-item-icon" />}
                                placeholder="请输入新密码" type="password"
                            />
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}